/*-Button for metadata-*/
body.anuppuccin-accent-toggle {
	&.anp-button-metadata-toggle,
	.markdown-rendered.metadata-button {
		.frontmatter-container .frontmatter-container-header {
			background-color: rgba(var(--ctp-accent), 0.8);
			&:hover {
				background-color: rgba(var(--ctp-accent), 0.7);
			}
			&:active {
				background-color: rgba(var(--ctp-accent), 0.6);
			}
		}
	}
}
body:not(.anuppuccin-accent-toggle) {
	&.anp-button-metadata-toggle,
	.markdown-rendered.metadata-button {
		.frontmatter-container .frontmatter-container-header {
			background-color: hsla(var(--color-accent-hsl), 0.8);
			&:hover {
				background-color: hsla(var(--color-accent-hsl), 0.7);
			}
			&:active {
				background-color: hsla(var(--color-accent-hsl), 0.6);
			}
		}
	}
}
.anp-button-metadata-toggle,
.markdown-rendered.metadata-button {
	.frontmatter-container {
		padding: 0;
		.frontmatter-container-header {
			width: 32px !important;
			z-index: 1;
			height: 32px !important;
			text-overflow: clip;
			overflow: hidden;
			color: transparent !important;
			position: absolute;
			left: calc(100% - 32px);
			border-radius: 6px;
		}
		.frontmatter-container-header:after {
			position: absolute;
			content: " ";
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' data-darkreader-inline-stroke='' style='--darkreader-inline-stroke:currentColor;'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'%3E%3C/polygon%3E%3Cpolyline points='2 17 12 22 22 17'%3E%3C/polyline%3E%3Cpolyline points='2 12 12 17 22 12'%3E%3C/polyline%3E%3C/svg%3E");
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' data-darkreader-inline-stroke='' style='--darkreader-inline-stroke:currentColor;'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'%3E%3C/polygon%3E%3Cpolyline points='2 17 12 22 22 17'%3E%3C/polyline%3E%3Cpolyline points='2 12 12 17 22 12'%3E%3C/polyline%3E%3C/svg%3E");
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			background-size: contain;
			background-color: var(--background-primary);
			color: var(--background-secondary);
			width: 22px;
			height: 22px;
			margin-left: 5px;
			margin-top: 5px;
		}
	}
}
